<template>
  <view style="padding-bottom: 10rpx;">
    <!-- 套餐剩余次数-->
    <uni-card :is-shadow="false">
      <span style="margin-right: 15rpx;">套餐剩余次数：</span>
      <span class="common-money themeColor">{{ dataDetails.remainingNum }}</span>&nbsp;次
    </uni-card>

    <!-- 基本信息-->
    <uni-card title="基本信息" :is-shadow="false">
      <view>签署套餐编号：<span>{{ dataDetails.number }}</span></view>
      <view>签署套餐名称：<span>{{ dataDetails.signFlowFeeName }}</span></view>
      <view>签署套餐总量：
        <span>{{ dataDetails.signCountNum }} 次
          <span style="font-weight: 500;">（签署量：{{ dataDetails.signNum }} 次 + 赠送：{{ dataDetails.giveSignNum }}次）</span>
        </span>
      </view>
      <view>套餐状态：
        <template v-for="(item, index) in dicts.ec_sign_order_status">
          <template v-if="dataDetails.status == item.value">
            <uni-tag :text="item.text" :type="item.type"/>
          </template>
        </template>
      </view>
      <view>套餐剩余次数：<span>{{ dataDetails.remainingNum }} 次</span></view>
      <view>套餐过期时间：<span>{{ dataDetails.expirationTime }}</span></view>
      <view>套餐支付状态：
        <template v-for="(item, index) in dicts.ec_sign_order_pay_status">
          <template v-if="dataDetails.payStatus == item.value">
            <uni-tag :text="item.text" :type="item.type"/>
          </template>
        </template>
      </view>
      <view>交易时间：<span>{{ dataDetails.createTime }}</span></view>
      <view>过期时间：<span>{{ dataDetails.expirationTime }}</span></view>
      <view>描述：<span>{{ dataDetails.remark }}</span></view>
    </uni-card>
    <!-- 关联订单信息-->
    <uni-card v-if="!!orderPay" title="关联订单信息" :is-shadow="false">
      <view>交易编号：<span>{{ orderPay.number }}</span></view>
      <view>交易名称：<span>{{ orderPay.name }}</span></view>
      <view>支付类型：
        <template v-for="(item, index) in dicts.ec_order_pay_type">
          <template v-if="orderPay.payType == item.value">
            <uni-tag :text="item.text" :type="item.type"/>
          </template>
        </template>
      </view>
      <view>消费金额：
        <span>
          {{
            (orderPay.payType == 1) ? parseFloat(Number(orderPay.amount).toFixed(0)) + ' g 碳能量' : orderPay.amount + ' 元'
          }}
        </span>
      </view>
      <view>订单状态：
        <template v-for="(item, index) in dicts.ec_order_status">
          <template v-if="orderPay.status == item.value">
            <uni-tag :text="item.text" :type="item.type"/>
          </template>
        </template>
      </view>
      <view>下单人：<span>{{ orderPay.orderPersonName }}</span></view>
      <view>支付人：<span>{{ orderPay.payerName }}</span></view>
      <view>交易时间：<span>{{ orderPay.createTime }}</span></view>
      <view>支付时间：<span>{{ orderPay.payTime }}</span></view>
    </uni-card>
  </view>
</template>

<script>
import {getDictsByNameForUni} from "@/utils/dicts";
import {getOrderPay} from "@/api/ec/console/fee/orderPay";
import {getFlowFeeOrder} from "@/api/ec/console/fee/signFlowFeeOrder";

export default {
  data() {
    return {
      // 数据字典
      dicts: {
        // 套餐状态
        ec_sign_order_status: [],
        // 支付状态
        ec_sign_order_pay_status: [],
        // 支付类型
        ec_order_pay_type: [],
        // 订单状态
        ec_order_status: [],
      },
      // 详情数据
      dataDetails: {},
      // 关联订单信息
      orderPay: null,
    }
  },
  onLoad(option) {
    // 获取参数
    this.dataDetails = JSON.parse(option.dataDetails)
    // 加载字典数据
    this.getDicts()
  },
  created() {
    this.getRecordDetails();
    if (!!this.dataDetails.orderPayId) {
      this.getOrderPayInfo(this.dataDetails.orderPayId);
    }
  },
  methods: {
    // ===============================================================================================================
    // ==== 加载数据字典
    // ===============================================================================================================
    /**加载数据字典*/
    getDicts() {
      // 套餐状态
      this.dicts.ec_sign_order_status = getDictsByNameForUni("ec_sign_order_status");
      // 支付状态
      this.dicts.ec_sign_order_pay_status = getDictsByNameForUni("ec_sign_order_pay_status");
      // 支付类型
      this.dicts.ec_order_pay_type = getDictsByNameForUni("ec_order_pay_type");
      // 订单状态
      this.dicts.ec_order_status = getDictsByNameForUni("ec_order_status");
    },
    /** 获取订单详情 */
    getRecordDetails() {
      getFlowFeeOrder(this.dataDetails.id).then(response => {
        this.dataDetails = response.data;
      });
    },
    /** 查询订单详细 */
    getOrderPayInfo(orderId) {
      uni.showLoading({title: '加载中...', mask: true});
      getOrderPay(orderId).then(response => {
        uni.hideLoading()
        this.orderPay = response.data;
      }).catch(() => {
        uni.hideLoading()
      });
    },
  }
}
</script>

<style lang="scss" scoped>
page {
  background: $uni-bg-color;
}

view {
  margin-bottom: 16rpx;
}

.common-money {
  font-size: 40rpx;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  line-height: 40rpx;
  margin-right: 15rpx;
}
</style>
